<template>
  <div>
    <div class="citys">
      <ul class="forchoose">
        <li @click="changemystyle" :style="{'color':(iscolor?'#ff5f16':'')}">
            <span v-show="!iscolor">全城<img class="more" src=""></span>
            <span v-show="iscolor">全城<img class="more" src=""></span>
        </li>
        <li>最近去过</li>
      </ul>
      <div class="down" v-show="iscolor ">
        <ul class="forlist">
          <li>
            <span @click="goon('all')" :class="{'adds':districtname==='all'}">全城</span>
          </li>
          <li v-for="(i,index) in districts" :key="index">
            <span @click="goon(i.name)" :class="{'adds':districtname==i.name}">{{i.name}}</span>
          </li>
        </ul>
      </div>
    </div>

    <div class="body">
      <ul>
        <li @click="senurl(i.cinemaId)" class="cinemalist" v-for="i in cinemalist" :key="i.cinemaId" v-show="districtname=='all'||i.districtName==districtname">
          <h3>
            <span class="filmname">{{i.name}}</span>
            <span class="price">{{`￥${i.lowPrice/100}起`}}</span>
          </h3>
          <p class="address">{{i.address}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { districtSearch } from "@/modules/districtSearch.js";
export default {
  data() {
    return {
      iscolor: false,
      districts: "" ,//区域
      districtname:'all'
    }
  },
  computed: {
    //从store获取影院信息
    cinemalist() {
      if (this.$store.state.cinema.data) {
        //异步为空会出错
        return this.$store.state.cinema.data.data.cinemas; //created获取后会更新
      } else return [];
    },
    city() {
      //获取城市
      return this.$store.state.city;
    }
  },
  methods: {
    senurl(id){//获取发送影院id
      this.$router.push({name:'cinemaDetial',params:{cinemaid:id}})
    },
    getcinemalist(i) {
      //根据城市获取影院，异步
      this.$store.dispatch("changecinema", this.city.id);
    },
    changemystyle() {
      //下拉样式
      this.iscolor = !this.iscolor;
    },
    goon(t) //下拉显示隐藏
{
    this.districtname = t
    this.iscolor = !this.iscolor
}
  },
  created() {
    var _this = this; //获取城市中的区域信息,异步
    districtSearch.search(this.city.name, function(status, result) {
      _this.districts = result.districtList[0].districtList;
    });
    this.getcinemalist(this.city);
  },
};
</script>
<style scoped>
.citys {
  position: fixed;
  z-index: 19;
  top: 1rem;
  width: 100%;
  font-size: 0.3rem;
  overflow: hidden;
  background-color: white;
}
.citys .forchoose li {
  float: left;
  width: 50%;
  height: 1rem;
  text-align: center;
  line-height: 1rem;
}
.down {
  width: 100%;
}
.forlist li {
  width: 24%;
  text-align: center;
  float: left;
  font-size: 0.25rem;
  line-height: 0.5rem;
  margin-top: 0.05rem;
  margin-bottom: 0.15rem;
}
.forlist li span {
  border: 0.02rem solid #b8b6b5;
  display: block;
  width: 70%;
  height: 0.5rem;
  margin: 0 auto;
  border-radius: 0.1rem;
}
.adds {
      border: 0.02rem solid #ff5f16 !important;
      color:#ff5f16 !important;
}

.body {
  padding-top: 2rem;
}
.cinemalist {
  padding: 0.3rem 0 0.2rem 0.3rem;
  line-height: 0.3rem;
}
.price {
  color: red;
  float: right;
  padding-right: 0.6rem;
}
.filmname {
  width: 3.5rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.3rem;
  overflow: hidden;
  display: inline-block;
  color: #191a1b;
  font-weight: 400;
}
.address {
  width: 3.5rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding-top: 0.15rem;
  color: #797d82;
}
.more{
  height: 0.1rem;
  margin-left: 0.1rem;
}
</style>